<template>
  <view class="environment-chart">
    <view class="chart-title">饲养环境要求</view>
    <view class="env-list">
      <view class="env-item" v-if="envData?.temperature">
        <uni-icons type="thermometer" size="18" />
        <text>温度：{{ envData.temperature }}</text>
      </view>
      <view class="env-item" v-if="envData?.humidity">
        <uni-icons type="water" size="18" />
        <text>湿度：{{ envData.humidity }}</text>
      </view>
      <view class="env-item" v-if="envData?.lighting">
        <uni-icons type="lightbulb" size="18" />
        <text>光照：{{ envData.lighting }}</text>
      </view>
      <view class="env-item" v-if="envData?.substrate">
        <uni-icons type="home" size="18" />
        <text>垫材：{{ envData.substrate }}</text>
      </view>
      <view class="env-item" v-if="envData?.feeding">
        <uni-icons type="food" size="18" />
        <text>喂食：{{ envData.feeding }}</text>
      </view>
    </view>
  </view>
</template>

<script>
  export default {
    name: "environment-chart",
    props: {
      data: {
        type: Object,
        default: () => ({
          temperature: '',
          humidity: '',
          lighting: '',
          substrate: '',
          feeding: ''
        })
      }
    },
    computed: {
      envData() {
        return this.data || {
          temperature: '',
          humidity: '',
          lighting: '',
          substrate: '',
          feeding: ''
        }
      }
    }
  }
</script>

<style lang="scss">
  .environment-chart {
    padding: 20rpx;
    background: #fff;
    
    .chart-title {
      font-size: 32rpx;
      font-weight: bold;
      color: #333;
      margin-bottom: 20rpx;
    }
    
    .env-list {
      .env-item {
        display: flex;
        align-items: center;
        margin-bottom: 20rpx;
        color: #666;
        font-size: 28rpx;
        
        .uni-icons {
          margin-right: 10rpx;
          color: #5cb85c;
        }
      }
    }
  }
</style>